<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:pe="http://primefaces.org/ui/extensions"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">Tạo mới bài viết</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{itemBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "list.jsf";' rendered="#{!itemBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <f:metadata>
            <f:event type="preRenderView" listener="#{itemBean.preNewAction()}" />
        </f:metadata>
        <h:form id="mainForm">
            <p:panel header="Tạo mới bài viết">
                <p:messages id="msgs"/>
                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Lưu" action="#{itemBean.saveAction()}" update="mainForm"/>
                        <p:commandButton value="Hủy" action="#{itemBean.cancelAction()}" immediate="true"/>
                        <p:commandButton type="reset" value="Nhập lại"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách bài viết" url="list.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
                
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel for="name" style="display: inline; float: right; padding-right: 5px;" value="Tên bài viết *" />  
                    <p:inputText value="#{itemBean.item.name}" id="name" required="true" label="Tên bài viết" maxlength="100"
                                 requiredMessage="Yêu cầu nhập tên bài viết"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Thumbnail URL" />  
                    <p:inputText value="#{itemBean.item.thumbnailURL}" maxlength="200"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Danh mục" />
                    <h:selectOneMenu id="category" value="#{itemBean.item.category}" converter="categoryConverter">
                        <f:selectItem itemValue="" itemLabel=""/>
                        <f:selectItems value="#{categoryBean.categoryList}"/>
                    </h:selectOneMenu>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Thiết bị" />
                    <p:selectManyMenu value="#{itemBean.item.devices}" converter="deviceConverter">
                        <f:selectItems value="#{itemBean.deviceList}" var="device" itemLabel="#{device.toString()}" itemValue="#{device}"/>  
                    </p:selectManyMenu>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Trạng thái" />
                    <p:selectOneMenu value="#{itemBean.item.status}" effect="fade">  
                        <f:selectItems value="#{itemBean.statusList}" var="item" itemLabel="#{item.toString()}" itemValue="#{item}"/>  
                    </p:selectOneMenu>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Tags" />  
                    <p:inputText value="#{itemBean.item.tags}" maxlength="200"/>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Lời giới thiệu" />  
                    <pe:ckEditor id="introduction" value="#{itemBean.item.introduction}" checkDirtyInterval="0" width="800" skin="v2">  
                        <p:ajax event="save" listener="#{itemBean.saveAction()}"/>  
                    </pe:ckEditor>
                    
                    <h:outputLabel style="display: inline; float: right; padding-right: 5px;" value="Nội dung *" />
                    <pe:ckEditor id="content" value="#{itemBean.item.content}" checkDirtyInterval="0" width="800" skin="v2">  
                        <p:ajax event="save" listener="#{itemBean.saveAction()}"/>  
                    </pe:ckEditor>
                </h:panelGrid>

                <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                    <p:toolbarGroup align="left">  
                        <p:commandButton value="Lưu" action="#{itemBean.saveAction()}" update="mainForm"/>
                        <p:commandButton value="Hủy" action="#{itemBean.cancelAction()}" immediate="true"/>
                        <p:commandButton type="reset" value="Nhập lại"/>
                    </p:toolbarGroup>
                    <p:toolbarGroup align="right">  
                        <p:menuButton value="Chuyển trang">  
                            <p:menuitem value="Trang chủ" url="/home.jsf" />  
                            <p:menuitem value="Danh sách bài viết" url="list.jsf" />
                        </p:menuButton>
                    </p:toolbarGroup>
                </p:toolbar>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>